<script setup lang="ts">
import {reactive} from 'vue'
import {protocolList} from "@/entityType/ProxyEntity.ts";
import ElSelectPlus from "@/components/ElSelectPlus/index.vue";
import {getipv4} from "@/api/ip.ts";
import {createUniqueString, deepClone} from "@/utils";
import {TableData} from "@/views/dashboard/TableData.ts";
import {ElMessage, ElMessageBox} from "element-plus";
import {add, del, getList, start, stop, update} from "@/api/proxy.ts";
// 页面响应数据
const pageData = reactive({
  tableData: [] as TableData[],
  ipv4: [] as string[],
})

getipv4().then(res=>{
  pageData.ipv4 = res.data as string[];
})

function tableAdd() {
  pageData.tableData.push({
    isAdd: false,
    id: createUniqueString(),
    protocol: 'tcp'
  })
}

async function getPageList() {
  pageData.tableData = (await getList()).data as TableData[];
}

getPageList()

async function delRow(row:TableData,$index: number) {
  await ElMessageBox.confirm('是否删除','提示',{
    type: 'warning',
  })
  await del([row.id])
  await getPageList()
  ElMessage({
    message: '完成',
    type: 'success',
  })
}
async function confirm(row:TableData,$index: number) {
  await add({
    ...row,
    isAdd: true,
  })
  await getPageList()
  ElMessage({
    message: '完成',
    type: 'success',
  })
}
function copy(row: TableData, $index: number){
  row = deepClone(row)
  row.id = createUniqueString()
  row.isAdd=false
  delete row.status
  pageData.tableData.push(row)
  ElMessage({
    message: '完成',
    type: 'success',
  })
}
async function updateRow(row: TableData, $index: number) {
  await ElMessageBox.confirm('是否更新', '提示', {
    type: 'warning',
  })
  await update(row)
  await getPageList()
  ElMessage({
    message: '完成',
    type: 'success',
  })
}
async function updateStatus(row: TableData, $index: number) {
  await ElMessageBox.confirm('是否更新', '提示', {
    type: 'warning',
  })
  if(row.status==='运行') {
    await stop(row)
  } else if(row.status === '停止') {
    await start(row)
  }
  await getPageList()
  ElMessage({
    message: '完成',
    type: 'success',
  })
}
</script>

<template>
  <div class="app-container">
    <div>
      <div>ipv4信息：{{pageData.ipv4}}</div>
      <el-button
        @click="tableAdd"
        type="primary"
      >添加</el-button>
    </div>
    <el-table :data="pageData.tableData" :max-height="700">
      <el-table-column
        label="目标地址"
        prop="target"
      >
        <template #default="{row,column,$index}">
          <el-input v-model="row[column.property]"></el-input>
        </template>
      </el-table-column>
      <el-table-column
        label="目标端口"
        prop="targetPort"
      >
        <template #default="{row,column,$index}">
          <el-input-number v-model="row[column.property]"></el-input-number>
        </template>
      </el-table-column>
      <el-table-column
        label="协议类型"
        prop="protocol"
      >
        <template #default="{row,column,$index}">
          <ElSelectPlus
              v-model="row[column.property]"
              :options="protocolList.map(item => {return {value: item}})"
          ></ElSelectPlus>
        </template>
      </el-table-column>
      <el-table-column
          label="本地代理端口"
          prop="localPort"
      >
        <template #default="{row,column,$index}">
          <el-input-number v-model="row[column.property]"></el-input-number>
        </template>
      </el-table-column>
      <el-table-column
          label="状态"
          prop="status"
      >
      </el-table-column>
      <el-table-column
          label="操作"
      >
        <template #default="{row,column,$index}">
          <div>
            <el-button
                type="primary"
                v-if="!row.isAdd"
                @click="confirm(row,$index)"
            >确定</el-button>
            <el-button
                type="primary"
                v-if="row.id && row.isAdd"
                @click="updateRow(row,$index)"
            >更新</el-button>
            <el-button
                type="danger"
                @click="delRow(row,$index)"
            >删除</el-button>
            <el-button
                type="success"
                @click="copy(row,$index)"
            >复制</el-button>
          </div>
          <div v-if="row.isAdd" style="margin-top: 10px;">
            <el-button
                type="primary"
                @click="updateStatus(row,$index)"
            >{{row.status==='运行'?'停止':'运行'}}</el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<style scoped lang="scss">
.app-container{
}
</style>